<template>
    <view class="content">
        <view class="list" v-for="item in list" @click="tolives(item)">
            <image :src="item.cover_images" class="list-img"></image>
            <view class="list-title">
                {{ item.title }}
            </view>
			<!-- 播放按钮 -->
			<view class="bofang-icon"><image src="https://mes.renkangshangcheng.cn/appimage/jinru.png"></image></view>
			<!-- 直播状态 -->
			<view class="lives-type">
				<view style="display: flex;align-items: center;">
					<view class="icon">
						<image v-if="item.status!=1" src="https://mes.renkangshangcheng.cn/appimage/weikaishi.png"></image>
						<image v-if="item.status==1" src="https://mes.renkangshangcheng.cn/appimage/zhibozhong.png"></image>
						</view>
					<view class="type-msg">
						<text v-if="item.status==1">直播中...</text>
						<text v-if="item.status==2">未开始</text>
						<text v-if="item.status==3">已结束</text>
						</view>
				</view>
				<view style="display: flex;align-items: center;" class="time-count">
					<text v-if="item.status==1">{{item.online_count}}人观看</text>
					<text v-if="item.status==2">{{item._begin_time}}</text>
					<text v-if="item.status==3">{{item._begin_time}}</text>
					
					</view>
			</view>
			
        </view>
    </view>
</template>

<script>
    export default {
        name:"lives",
        data() {
            return {
                list:[
                ],
				formData:{
					page:1,
					limit:10
				}
				
            };
        },
		created() {
			this.get_list()
		},
		methods:{
			get_list()
			{
				var _this=this;
				var data=this.formData;
				_this.$api.doRequest("post","api/live_list",data).then(res=>{
					_this.list=res.data.data.list;
				})
			},
			tolives(item){
				console.log(item)
				var _this=this;
				var data={
					livingid:item.livingid,
					code_type:0
				}
				_this.$api.doRequest("post","api/get_living_code",data).then(res=>{
					var code=res.data.data.living_code
					wx.navigateToMiniProgram({
					  appId: 'wx7424030d69bde86e',
					  path: `pages/watch/index?living_code=${code}`,
					  success(res) {
					    // 打开成功
					  }
					})
				})
		
			}
		}
    }
</script>

<style>
	image{
		width: 100%;
		height: 100%;
	}
.content {
    padding: 0;
    margin:0;
	overflow: auto !important;
	height: 100vh;
	padding-bottom: 600upx;
}
.list {
    width:750upx;
	position: relative;
}
.list-img {
    width:750upx;
    height:380upx;
}
.list-title {
    padding-left:20upx;
    height:70upx;
    line-height: 70upx;
    color:#000;
    font-weight: 500;
}
.bofang-icon{
	width: 72upx;
	height: 72upx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #B9BAB3;
	border-radius: 50%;
}
.lives-type{
	position: absolute;
	bottom: 100upx;
	left: 0;
	box-sizing: border-box;
	padding: 0 30upx;
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	color: #FFFFFF;
	font-size: 24upx;
	
}
.lives-type .icon{
	width: 40upx;
	height: 40upx;
	margin-right: 20upx;
}
.lives-type .type-msg{
	font-size: 28upx;
	color: #FFFFFF;
	
}
</style>
